<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Level from './level/index.vue'
import Tips from './Tips/index.vue'
import HospitalCard from './hospitalcard/index.vue'
import { getHospitalListService } from '@/apis/home'
import type { Content } from '@/apis/home/type'

// 初始化数据
const hospitalList = ref<Content>([])
const total = ref<number>(0)
const pageNo = ref<number>(1)
const pageSize = ref<number>(2)
// 获取医院列表
const getHospitalList = async (pager = 1) => {
  pageNo.value = pager
  const res = await getHospitalListService(pageNo.value, pageSize.value)
  hospitalList.value = res.data.content
  total.value = res.data.totalElements
}
// 页面渲染完毕
onMounted(() => {
  getHospitalList()
})
// 页面size变化
const onSizeChange = () => {
  getHospitalList()
}
// 筛选
const onLevelRegion = async (val: any) => {
  pageNo.value = 1
  const res = await getHospitalListService(
    pageNo.value,
    pageSize.value,
    val.level,
    val.region
  )
  hospitalList.value = res.data.content
  total.value = res.data.totalElements
}
</script>

<template>
  <!-- 轮播图 -->
  <Carousel></Carousel>
  <!-- 搜索框 -->
  <Search></Search>

  <el-row>
    <el-col :span="19" :xs="24">
      <!-- 等级 -->
      <Level @levelRegionChange="onLevelRegion"></Level>
      <!-- 医院卡片 -->
      <div class="hospital-card" v-if="hospitalList.length">
        <HospitalCard
          class="card"
          v-for="item in hospitalList"
          :key="item.id"
          :hospitalInfo="item"
          @click="$router.push(`/hospital?hoscode=${item.hoscode}`)"
        ></HospitalCard>
        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total"
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          @current-change="getHospitalList"
          @size-change="onSizeChange"
          :page-sizes="[2, 6, 10, 16]"
          style="width: 100%"
        ></el-pagination>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
    </el-col>
    <el-col :span="1"></el-col>
    <el-col :span="4" :xs="0">
      <Tips></Tips>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.hospital-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .card {
    width: 48%;
    margin-bottom: 20px;
  }
}
</style>
